<template>
  <div class="page" style="overflow: scroll">
    <div class="top">
      <div class="icon">
        <div class="left">
          <img src="../assets/icon/zhixiangzuo.svg" alt="" class="toLeft" />
        </div>
        <div class="right">
          <img src="../assets/icon/lishidingdan.svg" alt="" />
          <img src="../assets/icon/wentiguanli.svg" alt="" class="wenti" />
        </div>
      </div>
      <div class="ETH"><span>ETH</span> 質押</div>
      <div class="msg">
        被动收入。参考APR：<span>3%</span
        ><img src="../assets/icon/htmal5icon28.svg" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="income">累计收益</div>
      <div class="earnings">0.00000000 <span>BETH</span></div>
      <div class="income">昨日收益</div>
      <div class="YTDEarnings">0.00000000 <span>BETH</span></div>
      <div class="income_1">WBETH 餘額</div>
      <div class="WthMoney">
        0.00 <span>WBETH</span>&nbsp; <button>立即封装</button>
      </div>
    </div>
    <div class="introduce">
      <div class="Process">
        ETH 質押流程
        <div
          class="icons"
          style="width: 15px; height: 15px; background-color: rgb(51, 60, 69)"
        >
          <img
            class="icon1"
            v-if="showIcon1"
            @click="toggleIcons"
            src="../assets/icon/xiangxia.svg"
            alt=""
            style="width: 10px; height: 10px; margin: 2.5px"
          />
          <img
            class="icon2"
            v-else-if="!showIcon1"
            @click="toggleIcons1"
            src="../assets/icon/xiangshang.svg"
            alt=""
            style="width: 10px; height: 10px; margin: 2.5px"
          />
        </div>
      </div>
      <div class="show" v-if="type == 'xianshi'">
        <div class="Dad" style="display: flex">
          <div class="left">
            <div class="box"><span>1</span></div>
            <div class="line"></div>
            <div class="box"><span>2</span></div>
            <div class="line two"></div>
            <div class="box"><span>3</span></div>
          </div>
          <div class="right">
            <div class="TEXT">
              <div class="dropDown">質押 ETH</div>
              <div class="text">
                一鍵質押您的ETH，並輕鬆開始產生收益，提供代幣数量保護與罰沒保障。您將以1:1的比率獲得BETH
                代表您質押的 ETH，並作為 ETH質押獎勵代幣。
              </div>
            </div>
            <div class="TEXT">
              <div class="dropDown">發放收益</div>
              <div class="text">
                我們將根據參與者的 BETH
                持倉數量定期發放鏈上獎勵給他們。鏈上獎勵將以BETH
                的形式發放至用户的現貨帳戶。
              </div>
            </div>
            <div class="TEXT">
              <div class="dropDown">贖回 ETH</div>
              <div class="date">自 2023-04-19 起可用</div>
              <div class="text">
                您能以 1:1 的比率將 BETH 贖回為
                ETH，並在現貨錢包中收到與您贖回的 BETH餘額等值的 ETH 金額。<br />
                <span
                  >根據以太坊網路的費率限制設計，每天只能贖回有限数量的
                  ETH。如果您想贖回
                  BETH，則應等到接下來的幾天内額度重新开放。</span
                >
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="border-bottom: 1px solid #808791; width: 100%"></div>
      <div>
        <div></div>
      </div>
      <div class="Process">
        BETH 歷史 APR
        <div
          class="icons"
          style="width: 15px; height: 15px; background-color: rgb(51, 60, 69)"
        >
          <img
            class="icon1"
            @click="qieH"
            v-if="tuXian"
            src="../assets/icon/xiangxia.svg"
            alt=""
            style="width: 10px; height: 10px; margin: 2.5px"
          />
          <img
            class="icon2"
            @click="qieH1"
            v-else-if="!tuXian"
            src="../assets/icon/xiangshang.svg"
            alt=""
            style="width: 10px; height: 10px; margin: 2.5px"
          />
        </div>
      </div>
      <div style="background-color: #29313e" v-if="type_1 == 'tuxian'">
        <div class="showLine">
          <div>
            <div class="label" style="margin-left: 0">
              Data &nbsp;2024-01-01
            </div>
          </div>
          <div>
            <div class="label">
              BETH APR &nbsp;<span style="color: #4d9984">3%</span>
            </div>
          </div>
          <img
            src="../assets/icon/riqi.svg"
            alt=""
            style="width: 20px; height: 20px"
          />
        </div>
        <div id="echarts" style="height: 300px"></div>
      </div>

      <div style="border-bottom: 1px solid #808791; width: 100%;"></div>
      <div class="Process">
        將 BETH 封裝成 WBETH <span>新</span>
        <div
          class="icons"
          style="width: 15px; height: 15px; background-color: rgb(51, 60, 69)"
        >
          <img
            class="icon1"
            @click="fz"
            v-if="fengZ"
            src="../assets/icon/xiangxia.svg"
            alt=""
            style="width: 10px; height: 10px; margin: 2.5px"
          />
          <img
            class="icon2"
            @click="Nfz"
            v-else-if="!fengZ"
            src="../assets/icon/xiangshang.svg"
            alt=""
            style="width: 10px; height: 10px; margin: 2.5px"
          />
        </div>
      </div>
      <div class="BtoW" v-if="type_2 == 'fengZhuang'">
        <div class="GoWbeth">
          <img
            src="../assets/icon/yitaifang.svg"
            alt=""
            style="width: 20px; height: 20px; margin-left: 10px"
          />
          <img
            src="../assets/icon/yitaifang.svg"
            alt=""
            style="width: 20px; height: 20px; margin-right: 10px"
          />
          前往 Wrapped Beacon ETH (WBETH)
          <img
            class="right"
            src="../assets/icon/right.svg"
            alt=""
            style="width: 10px; height: 10px"
          />
        </div>
        <div class="WEHMsg">
          封装 Beacon
          ETH(「WBETH」)是BETH的封装版本。封装的WBETH本質上帶有獎励。WBETH累積ETH2.0質押獎励的方式並非透過数量成長，而是透過相對於BETH的價值成長。有别於
          BETH，管未在整安现貨錢包中持有WBETH，其價值仍會增加。這意味著WBETH有潛力提供您雨倍的殖利率:()持有即可賺取質押獎励，(i)移至鏈上遗可探索DeFi及其他DApp
          的絕佳機會。用戶可在本真封装 BETH以接收WBETH。查詢下方1 WBETH 典BETH
          的歷史匯率。<br />
        </div>
        <div class="liaojie">了解更多</div>
      </div>
      <div
        style="border-bottom: 1px solid #808791; width: 100%; margin-bottom: 100px"
      ></div>
      <div class="operate">
        <button class="ransom">赎回</button>
        <button class="pledge">立即質押</button>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "oneOne",
  data() {
    return {
      showIcon1: true,
      tuXian: true,
      fengZ: true,
      type: "",
      type_1: "",
      type_2: "",
    };
  },
  methods: {
    initECharts() {
      console.log("520");
      let chartDom = document.getElementById("echarts");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(94, 86, 40)",
                },
                {
                  offset: 1,
                  color: "rgb(47, 50, 55)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [3.28, 3.28, 3.25, 3, 3.08, 3.09, 3.08],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    toggleIcons() {
      this.showIcon1 = !this.showIcon1;
      this.type = "xianshi";
      this.type_1 = "";
      this.tuXian = true;
      this.type_2 = "";
      this.fengZ = true;
    },
    toggleIcons1() {
      this.showIcon1 = !this.showIcon1;
      this.type = "";
    },
    qieH() {
      this.tuXian = !this.tuXian;
      this.type_1 = "tuxian";
      this.type = "";
      this.showIcon1 = true;
      this.type_2 = "";
      this.fengZ = true;
      this.$nextTick(function () {
        this.initECharts();
      });
    },
    qieH1() {
      this.tuXian = !this.tuXian;
      this.type_1 = "";
    },
    fz() {
      this.fengZ = !this.fengZ;
      this.type_2 = "fengZhuang";
      this.type = "";
      this.showIcon1 = true;
      this.type_1 = "";
      this.tuXian = true;
    },
    Nfz() {
      this.fengZ = !this.fengZ;
      this.type_2 = "";
    },
  },
  mounted() {},
};
</script>

<style scoped>
.left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
.left .box {
  display: inline-block;
  width: 20px;
  /* margin-right: 10px; */
  border-radius: 100%;
  text-align: center;
  color: black;
  background-color: #fcd434;
}
.left .line {
  width: 2px;
  height: 92px;
  background-color: rgb(110, 118, 131);
}
.left .line.two {
  height: 80px;
}
.page {
  background-color: #171e26;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}
.BtoW {
  background-color: #29313e;
}
.BtoW .GoWbeth {
  background-color: #3b3c36;
  color: #b89622;
  height: 50px;
  font-size: 14px;
  display: flex;
  border-radius: 2px;
  align-items: center;
  margin: 15px;
}
.BtoW .GoWbeth .right {
  margin-left: auto;
  margin-right: 5%;
}
.BtoW .WEHMsg {
  margin: 30px 18px 15px 18px;
  color: #808791;
  font-size: 12px;
}
.BtoW .liaojie {
  margin: 0 18px 20px 18px;
  color: #b89622;
  font-size: 12px;
}
.show {
  background-color: #29313e;
}
.show .text {
  margin: 0 30px 20px 15px;
  font-size: 13px;
  color: #808791;
}
.show .text span {
  display: inline-block;
  margin-top: 15px;
}
.show .dropDown {
  color: #c9ccd5;
  font-size: 16px;
  margin: 15px 15px 6px;
}

.show .date {
  background-color: rgb(61, 66, 44);
  color: #fcd434;
  width: 160px;
  margin-bottom: 2px;
  font-size: 14px;
  text-align: center;
  margin-left: 15px;
}
.introduce {
  display: flex;
  flex-direction: column;
  background-color: #1f2630;
  flex: 1;
}
.introduce .Process {
  color: #c9ccd5;
  font-size: 16px;
  margin: 15px;
  display: flex;
  justify-content: space-between;
}
.icons {
  position: relative;
  left: -20px;
}

.icon1,
.icon2 {
  position: absolute;
  /* 设置图标的样式，例如宽度、高度等 */
}
.introduce .Process span {
  display: inline-block;
  color: black;
  margin-top: 3px;
  margin-left: -35%;
  width: 25px;
  height: 15px;
  text-align: center;
  border-radius: 3px;
  background-color: #fcd434;
  font-size: 12px;
}
.showLine {
  display: flex;
  justify-content: space-between;
  margin: 15px 15px 0 15px;
}
.showLine .label {
  color: #808791;
  font-size: 14px;
}
.operate {
  /* margin-top: auto;
  margin-bottom: 10%; */
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #171e26;
  width: 100%;
  height: 80px;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.operate .ransom {
  width: 46%;
  font-size: 14px;
  font-weight: 550;
  height: 45px;
  /* margin-left: 10px; */
  border-radius: 4px;
  border: none;
  background-color: #333b48;
  color: #c9ccd5;
}
.operate .pledge {
  width: 46%;
  font-size: 14px;
  font-weight: 550;
  height: 45px;
  margin-left: 5px;
  border-radius: 4px;
  border: none;
  background-color: #fcd434;
  color: black;
}
.content {
  background-color: #1f2630;
  margin: 10px 20px 10px;
}
.content .income {
  font-size: 12px;
  padding-top: 12px;
  margin-left: 14px;
  color: #808791;
}
.content .income_1 {
  font-size: 12px;
  padding-top: 8px;
  margin-left: 14px;
  color: #808791;
}
.content .earnings {
  color: #c9ccd5;
  font-size: 18px;
  margin-left: 14px;
  margin-top: 6px;
}
.content .YTDEarnings {
  font-size: 18px;
  margin-left: 14px;
  margin-top: 6px;
  color: #4d9984;
}
.content .WthMoney span {
  font-size: 13px;
}
.content .WthMoney button {
  font-size: 16px;
  border: none;
  border-radius: 4px;
  width: 90px;
  height: 28px;
  background-color: #333b48;
  color: #c9ccd5;
}
.content .WthMoney {
  color: #c9ccd5;
  font-size: 18px;
  margin-left: 14px;
  margin-top: 4px;
  padding-bottom: 12px;
}
.content .earnings span {
  font-size: 13px;
}
.content .YTDEarnings span {
  color: #c9ccd5;
  font-size: 13px;
}
.top .icon {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top {
  padding: 0 20px;

  background-color: #1f2630;
  color: #fff;
  padding-bottom: 1px;
}
.top .msg {
  font-size: 12px;
  color: #808791;
  margin-top: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.top .msg span {
  color: #4d9984;
  margin-right: 5px;
}
.top .ETH {
  font-size: 26px;
  font-weight: bold;
}
.top .ETH span {
  font-size: 26px;
}
.top img {
  width: 20px;
  height: 20px;
}
.wenti {
  margin-left: 20px;
}
/* .toLeft {
  width: 20px;
  height: 20px;
} */
</style>
